<script setup>
import Topbar from "@/components/Topbar/index.vue";
import Form from "@/components/Form/index.vue";
import waitProcess from "@/assets/images/wait_process.png";
import errorProcess from "@/assets/images/error_process.png";
import successProcess from "@/assets/images/success_process.png";
import { useglobalStore } from "@/stores/global.js";
import { computed, onActivated, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { queryEnterpriseUserAuditData } from "@/api/User/Worker.js";
import FormRole from "@/components/TableComponents/Role.vue";
import {
  queryRoleList,
  storeSelectPage
} from "@/api/System";
import FormStore from "@/components/TableComponents/Store.vue";
import { enterpriseUserAuditOpt } from "@/api/User/Worker.js";
const globalStore = useglobalStore();
const route = useRoute();
const tipClassformRef = ref();
const baseformRef = ref();
const tipClassformList = ref([
  {
    type: "text",
    key: "auditMemberName",
    label: "审核人：",
  },
  {
    type: "text",
    key: "auditTime",
    label: "审核时间：",
  },
  {
    type: "text",
    key: "submitTime",
    label: "提交时间：",
  },
]);
const baseformList = ref([
  {
    type: "text",
    key: "employeeName",
    label: "员工姓名：",
  },
  {
    type: "text",
    key: "userPhone",
    label: "员工手机号：",
  },
  {
    key: "userRoleId",
    label: "角色：",
    other: "userRoleId",
  },
  {
    type: "image",
    key: "qualificationCertificate",
    list: [],
    boxStyle: "width:160px;height:160px;border-radius:16px;",
    imageStyle: "border-radius:16px;",
    srcList: [],
    label: "资质证件：",
  },
  {
    type: "image",
    key: "completionCertificate",
    list: [],
    boxStyle: "width:160px;height:160px;border-radius:16px;",
    imageStyle: "border-radius:16px;",
    srcList: [],
    label: "结业证：",
  },
  {
    type: "text",
    key: "userRemark",
    label: "备注：",
  },
  {
    key: "storeIds",
    other: "storeIds",
    label: "可进入门店：",
  },
]);
const routeType = computed(() => {
  return route.query.type;
});
const userId = computed(() => {
  return route.query.uuid;
});
watchEffect(() => {
  tipClassformList.value = [
    {
      type: "text",
      key: "auditMemberName",
      label: "审核人：",
    },
    {
      type: "text",
      key: "auditTime",
      label: "审核时间：",
    },
    {
      type: "text",
      key: "submitTime",
      label: "提交时间：",
    },
  ];
  if (routeType.value) {
    tipClassformList.value = [
      {
        key: "state",
        label: "状态：",
        otherFormItem: true,
      },
      {
        type: "text",
        key: "auditMemberName",
        label: "审核人：",
      },
      {
        type: "text",
        key: "auditTime",
        label: "审核时间：",
      },
      {
        type: "text",
        key: "submitTime",
        label: "提交时间：",
      },
    ];

    if (
      routeType.value == "3" &&
      !tipClassformList.value.some((v) => v.key == "auditResult")
    ) {
      tipClassformList.value.splice(1, 0, {
        type: "text",
        key: "auditResult",
        label: "驳回理由：",
      });
    }
  }
});
onActivated(async () => {
  await getData();
});
const messageBoxRef = ref();
const btnLoading = ref(false);
const sumbit = (state) => {
  if (state == "2") {
    modalRef.value.open();
  } else {
    messageBoxRef.value.open();
  }
};
const modalRef = ref();
const modalFormRef = ref();
const modalFormList = ref([
  {
    type: "textarea",
    key: "auditResult",
    label: "",
    width: "348px",
    maxlength: "50",
    clearable: true,
    minRows: 4,
    placeholder: "请输入驳回理由，不能超过50个字",
  },
]);
const modalFormRules = {
  auditResult: [
    { required: true, message: "请输入驳回理由", trigger: "change" },
  ],
};

const closeModal = () => {
  modalRef.value.close();
};

const submitModal = async () => {
  btnLoading.value = true;
  const { state, data } = await modalFormRef.value.submitForm();
  if (state) {
    await enterpriseUserAuditOpt({ ...data, id: userId.value, auditStatus: 2 });
    closeModal();
    getData();
  } else {
    const messages = Object.values(data)[0];
    ElMessage({
      showClose: true,
      message: messages[0].message,
      type: "error",
    });
  }
  btnLoading.value = false;
};

const messageConfirm = async () => {
  try {
    // globalStore.setLoading(true);
    btnLoading.value = true;
    await enterpriseUserAuditOpt({ id: userId.value, auditStatus: 1 });
    getData();
  } finally {
    btnLoading.value = false;
    // globalStore.setLoading(false);
  }
};
const auditStatus = ref("0");
const roleList = ref([])
const storeSelectList = ref([])
const getData = async () => {
  const res = await queryEnterpriseUserAuditData(userId.value);
  auditStatus.value = res.auditStatus + "";
  baseformRef.value.setForm({
    employeeName: res.employeeName,
    auditMemberName: res.auditMemberName,
    userRoleId: res.userRoleId,
    userRemark: res.userRemark,
    storeIds: res.storeIds,
    userPhone: res.userPhone,

  });
  baseformList.value[3].list = res.qualificationCertificate.map((v, index) => ({
    src: v,
    initial: index,
  }));
  baseformList.value[3].srcList = res.qualificationCertificate;
  baseformList.value[4].list = [res.completionCertificate].map((v, index) => ({
    src: v,
    initial: index,
  }));
  baseformList.value[4].srcList = [res.completionCertificate];
  tipClassformRef.value.setForm({
    auditMemberName: res.auditMemberName,
    auditTime: res.auditTime,
    submitTime: res.submitTime,
    employeeName: res.employeeName,
    auditResult: res.auditResult
  });
  const roleRes = await queryRoleList()
  roleList.value = roleRes.records.map((v) => ({
    label: v.roleName,
    value: v.id,
  }));
  const storeSelectRes = await storeSelectPage()
  storeSelectList.value = storeSelectRes.records.map((v) => ({
    label: v.storeName,
    value: v.id,
  }));
};
</script>
<template>
  <Topbar :tabName="'人员详情'">
    <template #operate v-if="routeType == '1' && auditStatus == 0">
      <el-button
        style="min-width: 68px"
        type="danger"
        @click="sumbit('2')"
        :loading="btnLoading"
        >驳回</el-button
      >
      <el-button
        type="success"
        style="min-width: 68px"
        @click="sumbit('1')"
        :loading="btnLoading"
        >通过</el-button
      >
    </template>
  </Topbar>
  <div class="ml24 mr24 mt24 tipClass">
    <Form
      :key="routeType"
      :isCustomizeClass="'noHeightelformStyle'"
      ref="tipClassformRef"
      :formList="tipClassformList"
      labelWidth="74px"
    >
      <template #otherFormItem>
        <div class="flex align-items-center normalHeight">
          <img v-if="auditStatus == '0'" class="stateIcon" :src="waitProcess" />
          <img
            v-if="auditStatus == '1'"
            class="stateIcon"
            :src="successProcess"
          />
          <img
            v-if="auditStatus == '2'"
            class="stateIcon"
            :src="errorProcess"
          />
          <div
            v-if="auditStatus == '0'"
            class="stateClass"
            style="color: #ffab00"
          >
            待审核
          </div>
          <div
            v-if="auditStatus == '1'"
            class="stateClass"
            style="color: #18bf5b"
          >
            审核通过
          </div>
          <div
            v-if="auditStatus == '2'"
            class="stateClass"
            style="color: #ff2440"
          >
            审核驳回
          </div>
        </div>
      </template>
    </Form>
  </div>
  <Form
    :isCustomizeClass="'noHeightelformStyle'"
    class="formStyle"
    ref="baseformRef"
    :formList="baseformList"
    labelWidth="88px"
  >
    <template #userRoleId="{ form }">
      <FormRole class="normalHeight" :id="form" :key="form" :list="roleList" :origin="[form]" :index="0"></FormRole>
    </template>
    <template #storeIds="{ form }">
      <template v-if="form?.length">
        <div class="normalHeight" v-for="(ite, index) in form" :key="index">
          <FormStore :id="ite" :key="ite" :list="storeSelectList" :origin="form" :index="index"></FormStore>
        </div>
      </template>
      <span v-else class="normalHeight">-</span>
    </template>
  </Form>
  <Modal ref="modalRef" :title="'驳回理由'" :top="'35vh'" :width="'380px'">
    <template #content>
      <Form
        class="mt14"
        ref="modalFormRef"
        :formList="modalFormList"
        :labelWidth="'0'"
        :formRules="modalFormRules"
      ></Form>
    </template>
    <template #footer>
      <div>
        <el-button @click="closeModal">取消</el-button>
        <el-button type="primary" @click="submitModal">确定</el-button>
      </div>
    </template>
  </Modal>
  <MessageBox
    ref="messageBoxRef"
    :content="'确定通过？'"
    :rightBtnTxt="'通过'"
    :type="'success'"
    :confirmButtonClass="'confirmButtonClass_success'"
    @confirm="messageConfirm"
  />
</template>

<style lang="less" scoped>
.formStyle {
  padding: 15px 24px;
}
.tipClass {
  background: #3480ff0d;
  border-radius: 4px;
  padding: 16px 16px 1px;
}
.stateIcon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.stateClass {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
</style>
